<template>
    <div :class="`tech-shop-bag-store-item ${mode}`">
        <div class="store-item-header">
            <div class="checkbox-content" @click="selectOrUnselectAll">
                <MiniIcon v-if="isSelectAll" class="check-icon" name="checkfill" :size="20" />
                <MiniIcon v-else class="check-icon" name="checkcircle" :mode="mode" theme="#7D7D83" :styleMode="styleMode" :size="20" />
                <div class="store-name title-color">{{ storeData.name }}</div>
            </div>
        </div>
        <CheckboxGroup class="select-list-checkbox black-element-style" v-model="selectVal">
            <div v-for="(discountItem, idx) in storeData.prodsList" :key="idx">
                <div class="store-activity" v-if="discountItem.discountInfo">
                    <span class="activity-tag" :style="`${themeBackround}`">{{ discountItem.discountInfo.tag }}</span>{{ discountItem.discountInfo.value }}
                </div>
                <div class="store-item-goods-list">
                    <div class="store-goods-list-item" v-for="(item, index) in discountItem.list" :key="index">
                        <Checkbox class="black-element-style title-color" :name="index">
                            <div class="checkbox-content"  @click.stop="() => selectStoreItem(idx, index)">
                                <MiniIcon v-if="item.isSelect" class="check-icon" name="checkfill" :size="20" />
                                <MiniIcon v-else class="check-icon" name="checkcircle" :mode="mode" theme="#7D7D83" :styleMode="styleMode" :size="20" />
                            </div>
                        </Checkbox>
                        <div class="goods-content">
                            <BagItem :itemInfo="item" :isDisable="false" @minus="minusItemCount" @add="addItemCount" />
                        </div>
                    </div>
                </div>
            </div>
        </CheckboxGroup>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Checkbox, CheckboxGroup } from 'vant';
import { MiniIcon } from '@components/base';
import BagItem from './BagItem';
import ModeMixin from '@common/mixin';
import logger from '@common/logger';
import { isStoreSelectAll } from '@biztools/shopBag';

export default {
    name: 'BagStoreItem', // 购物袋商户项
    mixins: [ModeMixin],
    components: {
        BagItem,
        Checkbox,
        CheckboxGroup,
        MiniIcon,
    },
    props: {
        storeData: {
            type: Object,
            default() {
                return {};
            },
        },
        storeIndex: {
            type: Number,
            default: -1,
        },
    },
    data() {
        return {
            isAll: false, // 是否全部选中
            selectVal: [],
        };
    },
    computed: {
        isSelectAll() {
            const { storeData } = this.$props;
            return isStoreSelectAll(storeData.prodsList);
        },
    },
    mounted() {
        logger.warn('BagStoreItem => 传入的信息为', this.$props.storeData);
    },
    methods: {
        ...mapActions([
            'toggleStoreItem',
            'toggleStoreListItem',
            'addBagItemQuantity',
            'minusBagItemQuantity',
        ]),
        isAllChange(val) {
            logger.info('全部选中状态改变', this.isAll, val);
        },
        selectOrUnselectAll() {
            const { storeIndex } = this.$props;
            logger.info('BagStoreItem => 执行选中全部');
            this.toggleStoreItem(storeIndex);
            // if (this.isAll) {
            //     this.isAll = false;
            //     this.unSelectAllGoods();
            // } else {
            //     this.isAll = true;
            //     this.selectVal = storeData.list.map((item, index) => index);
            // }
        },
        selectStoreItem(prodsIndex, itemIndex) {
            const { storeIndex } = this.$props;
            logger.info('BagStoreItem => 切换单个物品选中状态');
            this.toggleStoreListItem({ storeIndex, prodsIndex, itemIndex });
        },
        storeItemChange(values) {
            const { storeData } = this.$props;
            logger.info('当前选中的值为：', values);
            // 判断是否全部选中
            if (this.selectVal.length === storeData.list.length) {
                this.isAll = true;
            } else {
                this.isAll = false;
            }
        },
        // 选中所有
        selectAllGoods() {
            const { storeData } = this.$props;
            logger.info('执行全部选中');
            this.selectVal = storeData.list.map((item, index) => index);
        },
        // 取消全部选中
        unSelectAllGoods() {
            this.selectVal = [];
        },
        // 增加单品的数量
        addItemCount(item) {
            logger.debugger('BagStoreItem => 当前操作的对象为', item);
            this.addBagItemQuantity(item);
        },
        // 减少单品的数量
        minusItemCount(item) {
            logger.debugger('BagStoreItem => 当前操作的对象为', item);
            this.minusBagItemQuantity(item);
        },
    },
};
</script>

<style lang="less">
.tech-shop-bag-store-item {
    .p-h(@shop-gap-md);
    .p-t(@shop-gap);
    background-color: @white;
    .mode-white();
    .store-item-header {
        height: 36px;
        .flex();
        align-items: center;
        font-weight: 500;
        font-size: @font-size-md;
        color: @text-color;
    }
    .store-activity {
        height: 30px;
        .p-l(@shop-gap + 20);
        .flex();
        align-items: center;
        font-size: @font-size-sm;
        color: @text-color;
        .activity-tag {
            width: 28px;
            height: 14px;
            color: @white;
            .t-c();
            .m-r(@shop-gap / 2);
            font-size: @font-size-mini;
            background: rgba(255,91,17,1);
            border-radius: 1px;
        }
    }
    .store-item-goods-list {
        .p-t(@shop-gap);
        .store-goods-list-item {
            .flex();
            .p-b(@shop-bag-gap);
            .p-t(@shop-gap);
            width: 100%;
            align-items: center;
            .goods-content {
                flex: 1;
                width: 100%;
            }
        }
    }
    .checkbox-content {
        .flex();
        align-items: center;
        .check-icon {
            .m-r(@shop-gap);
            width: 20px;
        }
    }
    .van-checkbox {
        .van-checkbox__icon {
            display: none;
        }
        .van-checkbox__label {
            .m-l(0);
        }
    }
}
</style>
